<template>
	<view class="min100 plr-30 pt-20  bg">
		<view class="bold mb-20 size-30 ">
			我要充值
		</view>
		<view class="flex flex-between flex-wrap">
			<view @click="changePrice(item,index)"
				:class="['priceItem','text-center','radius-10','size-24','ptb-20','mb-20',changeIndex==index?'activeItem':'']"
				v-for="(item,index) in priceList" :key="index">
				￥{{item}}
			</view>
		</view>
		<view class="bold size-30 ">
			金额
		</view>
		<u-field v-model="account" label="￥" @input="changeValue" label-width="10" placeholder="请输入充值金额" type="number"
			placeholder-style="color:#000" />
		<!-- 选择 -->
		<view class="bold mtb-20 size-30 ">
			选择支付方式
		</view>
		<radio-group @change="radioChange">
			<label class="flex mb-40 flex-between" v-for="(item, index) in payList" :key="item.name">
				<view class="flex">
					<image :src="item.image" class="payIcon mr-20" mode=""></image>
					<view class="">{{item.name}}</view>
					<view>
					</view>
				</view>
				<radio :value="item.name" :checked="index === current" color="#44ACFF" />
			</label>
		</radio-group>
		<view class="bold mtb-20 size-26 ">
			充值说明
		</view>
		<view class="mt-30 size-24 conWrap" v-html="rechargeCon">

		</view>
		<u-button type="primary" class="drawBtn" @click="submitRecharge"  >立即充值</u-button>
	</view>
</template>

<script>
	// #ifdef H5
	import wx from "weixin-js-sdk";
	// #endif
	export default {
		data() {
			return {
				config_appid: "",
				btnDisabled: false,
				priceList: [],
				changeIndex: 0,
				account: '',
				payList: '',
				current: 0,
				rechargeCon: '',
				payId: "",
				type: 1,
			}
		},
		onShow() {
			this.$http('api/login/serverConfig').then(res => {
				this.config_appid = res.wx_global_app_id;
			})
			// #ifdef H5
			this.type = 1;
			// 判断是否是微信环境
			let ua = navigator.userAgent.toLowerCase();
			let url = window.location.href;
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				this.type = 2;
				if (url.indexOf("code") != -1) {
					let code = url
						.split("?")[1]
						.split("&")[0]
						.split("=")[1];
					this.$http('api/user/auth', {
						code: code
					}, 'POST').then(res => {})
				}
			}


			// #endif
			// #ifdef APP-PLUS
			this.type = 3;
			// #endif
			this.$http('api/remittance/remittanceList', {
				type: this.type,
			}).then(res => {
				this.priceList = res.price;
				this.account = res.price[0];
				this.payList = res.pay;
				// // #ifdef H5
				// this.payList = res.pay.slice(1, 2);
				// // 判断是否是微信环境
				// let ua = navigator.userAgent.toLowerCase();
				// let url = window.location.href;
				// if (ua.match(/MicroMessenger/i) == "micromessenger") {
				// 	this.payList = res.pay.slice(0, 2);
				// 	if (url.indexOf("code") != -1) {
				// 		let code = url
				// 			.split("?")[1]
				// 			.split("&")[0]
				// 			.split("=")[1];
				// 		this.$http('api/user/auth', {
				// 			code: code
				// 		}, 'POST').then(res => {})
				// 	}
				// }
				// // #endif
				// // #ifdef APP-PLUS
				// this.payList = res.pay.slice(2);
				// // #endif
				this.rechargeCon = this.payList[0].content;
				this.payId = this.payList[0].id;
			})
		},
		methods: {
			changeValue(e) {
				this.priceList.forEach((item, index) => {
					if (item == e) {
						this.changeIndex = index;
					} else {
						this.changeIndex = -1;
					}
				})
			},
			changePrice(item, index) {
				this.changeIndex = index;
				this.account = item;
			},
			radioChange(e) {
				this.payList.forEach((item, index) => {
					if (item.name == e.detail.value) {
						this.rechargeCon = item.content;
						this.payId = item.id;
					}
				})
			},
			submitRecharge() {
				if (this.account == '') {
					uni.showToast({
						title: "请输入充值金额!",
						icon: 'none'
					})
					return;
				}
				console.log(this.payId)
				if (this.payId == 1) {
					this.btnDisabled = true;
					// 公众号支付
					let redirect_uri = window.location.href.split("?appid=")[0];
					this.$http('api/user/userInfo').then(res => {
						if (res.is_wx_auth == 0) {
							window.location.href =
								"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
								this.config_appid +
								"&redirect_uri=" +
								encodeURIComponent(redirect_uri) +
								"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
							return;
						}
						this.$http('api/remittance/remittance', {
							account: this.account,
							config_id: 1
						}).then(res => {
							this.btnDisabled = false;
							// 公众号环境
							wx.config({
								debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false,
								appId: res.pay.appId, // 必填，公众号的唯一标识
								timestamp: res.pay.timeStamp, // 必填，生成签名的时间戳
								nonceStr: res.pay.nonceStr, // 必填，生成签名的随机串
								signature: res.pay.paySign, // 必填，签名
								jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
							});
							wx.ready(() => {
								wx.checkJsApi({
									jsApiList: ["chooseWXPay"],
									success: function(res) {
										console.log("seccess");
									},
									fail: function(res) {
										console.log(res);
									}
								});
								wx.chooseWXPay({
									timestamp: res.pay
										.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
									nonceStr: res.pay.nonceStr, // 支付签名随机串，不长于 32 位
									package: res.pay
										.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
									signType: res.pay
										.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
									paySign: res.pay.paySign, // 支付签名
									success: function(res) {
										uni.showToast({
											title: "充值成功!"
										})
										setTimeout(() => {
											uni.switchTab({
												url: "./index"
											})
										}, 500)
									},
									fail: function(res) {}
								});
							});
							// wx.error(err => {
							// 	alert(err);
							// });
							// }
						})

					})
				}
				if (this.payId == 2) {
					this.btnDisabled = true;
					this.$http('api/remittance/remittance', {
						account: this.account,
						config_id: 2
					}).then(res => {
						// 微信
						uni.requestPayment({
							"provider": "wxpay",
							"orderInfo": {
								"appid": res.pay.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
								"noncestr": res.pay.noncestr, // 随机字符串
								"package": res.pay.package, // 固定值
								"partnerid": res.pay.partnerid, // 微信支付商户号
								"prepayid": res.pay.prepayid, // 统一下单订单号 
								"timestamp": res.pay.timestamp, // 时间戳（单位：秒）
								"sign": res.pay.sign // 签名，这里用的 MD5/RSA 签名
							},
							success(res) {
								_this.buyShow = false;
								uni.showToast({
									title: "充值成功!"
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/my/recharge'
									})
								}, 500)
							},
							fail(e) {}
						})
					})
				}
				if (this.payId == 3) {
					this.btnDisabled = true;
					this.$http('api/remittance/remittance', {
						account: this.account,
						config_id: 3
					}).then(res => {
						// 支付宝
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.pay, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
							success: function(res) {
								_this.buyShow = false;
								uni.showToast({
									title: "充值成功!"
								})
									setTimeout(() => {
									uni.switchTab({
										url: '/pages/my/recharge'
									})
								}, 500)
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					})
				}
				if (this.payId == 9) {
					this.btnDisabled = true;
					this.$http('api/remittance/remittance', {
						account: this.account,
						config_id: 4
					}).then(res => {
						let url = '';
						// #ifdef H5
						// let data = JSON.stringify(res.pay.postData);
						this.btnDisabled = false;
						let data = res.pay.postData;
						url = res.pay.url;
						let postForm = document.createElement("form");
						postForm.method = "post";
						postForm.action = url;
						let charInput = document.createElement("input");
						charInput.setAttribute("name", "charset");
						charInput.setAttribute("value", data.charset);
						postForm.appendChild(charInput);
						let dataInput = document.createElement("input");
						dataInput.setAttribute("name", "data");
						dataInput.setAttribute("value", data.data);
						postForm.appendChild(dataInput);
						let signInput = document.createElement("input");
						signInput.setAttribute("name", "sign");
						signInput.setAttribute("value", data.sign);
						postForm.appendChild(signInput);
						let typeInput = document.createElement("input");
						typeInput.setAttribute("name", "signType");
						typeInput.setAttribute("value", data.signType);
						postForm.appendChild(typeInput);
						document.body.appendChild(postForm);
						postForm.submit();
						// #endif
						// #ifdef APP-PLUS
						url = res.pay.url;
						let id = res.order_id;
						uni.navigateTo({
							url: "./webview?url=" + url + '&id=' + id
						})
						// #endif
					})
				}
				if (this.payId == 5) {
					this.btnDisabled = true;
					this.$http('api/remittance/remittance', {
						account: this.account,
						config_id: 5
					}).then(res => {
						let url = '';
						// #ifdef H5
						this.btnDisabled = false;
						let data = res.pay.postData;
						url = res.pay.url;
						let postForm = document.createElement("form");
						postForm.method = "post";
						postForm.action = url;
						let charInput = document.createElement("input");
						charInput.setAttribute("name", "charset");
						charInput.setAttribute("value", data.charset);
						postForm.appendChild(charInput);
						let dataInput = document.createElement("input");
						dataInput.setAttribute("name", "data");
						dataInput.setAttribute("value", data.data);
						postForm.appendChild(dataInput);
						let signInput = document.createElement("input");
						signInput.setAttribute("name", "sign");
						signInput.setAttribute("value", data.sign);
						postForm.appendChild(signInput);
						let typeInput = document.createElement("input");
						typeInput.setAttribute("name", "signType");
						typeInput.setAttribute("value", data.signType);
						postForm.appendChild(typeInput);
						document.body.appendChild(postForm);
						postForm.submit();
						// #endif
						// #ifdef APP-PLUS
						url = res.pay.url;
						let id = res.order_id;
						uni.navigateTo({
							url: "./webview?url=" + url + '&id=' + id
						})
						// #endif
					})
				}
				if (this.payId == 6) {
					console.log(this.payId)
					this.btnDisabled = true;
					this.$http('api/remittance/remittance', {
						account: this.account,
						config_id: 6
					}).then(res => {
						document.querySelector('body').innerHTML = res.pay;
						document.forms[0].submit()
				
					})
				}
				if (this.payId == 7) {
					this.btnDisabled = true;
					this.$http('api/remittance/remittance', {
						account: this.account,
						config_id: 7
					}).then(res => {
					this.btnDisabled = false;
						// #ifdef H5
						window.location.href=res.pay.mweb_url;									
						// #endif
						// #ifdef APP-PLUS
						let url = res.pay.url;
						let id = res.order_id;
						uni.navigateTo({
							url: "./webview?url=" + mweb_url + '&id=' + id
						})
						// #endif
					})
				}
				
				if (this.payId == 8) {
					this.btnDisabled = true;
					this.$http('api/remittance/remittance', {
						account: this.account,
						config_id: 8
					}).then(res => {
					this.btnDisabled = false;
				
						// #ifdef H5
						window.location.href=res.pay.url;									
						// #endif
						// #ifdef APP-PLUS
						let url = res.pay.url;
						let id = res.order_id;
						uni.navigateTo({
							url: "./webview?url=" + url + '&id=' + id
						})
						// #endif
		
				
					})
				}
				if (this.payId == 20) {
					this.$http("api/remittance/remittance", {
						account: this.account,
						config_id: 20
					}).then(res=>{
						const div = document.createElement('div')
						div.innerHTML = res.pay;
						document.body.appendChild(div)	
						if(document.forms['pay_submit']){
								document.forms['pay_submit'].submit();
						}
						if(document.forms['pay_form']){
								document.forms['pay_form'].submit();
						}
					})
				}
			}
		}
	}
</script>
// #ifdef H5
import wx from "weixin-js-sdk";
// #endif
export default {
data() {
return {
config_appid:"",
btnDisabled: false,
priceList: [],
changeIndex: 0,
account: '',
payList: '',
current: 0,
rechargeCon: '',
payId: ""
}
},
onShow() {
this.$http('api/login/serverConfig').then(res => {
this.config_appid = res.wx_global_app_id;
})
this.$http('api/remittance/remittanceList').then(res => {
this.priceList = res.price;
this.account = res.price[0];
this.payList = res.pay.slice(1);
// 判断是否是微信环境
// #ifdef H5
let ua = navigator.userAgent.toLowerCase();
let url = window.location.href;
if (ua.match(/MicroMessenger/i) == "micromessenger") {
if (url.indexOf("code") != -1) {
let code = url
.split("?")[1]
.split("&")[0]
.split("=")[1];
this.payList = res.pay;
this.$http('api/user/auth', {
code: code
}, 'POST').then(res => {})
}
}
// #endif
this.rechargeCon = this.payList[0].content;
this.payId = this.payList[0].id;
})
},
methods: {
changeValue(e) {
this.priceList.forEach((item, index) => {
if (item == e) {
this.changeIndex = index;
} else {
this.changeIndex = -1;
}
})
},
changePrice(item, index) {
this.changeIndex = index;
this.account = item;
},
radioChange(e) {
this.payList.forEach((item, index) => {
if (item.name == e.detail.value) {
this.rechargeCon = item.content;
this.payId = item.id;
}
})
},
submitRecharge() {
if (this.account == '') {
uni.showToast({
title: "请输入充值金额!",
icon: 'none'
})
return;
}
if (this.payId == 1) {
this.btnDisabled = true;
// 公众号支付
let redirect_uri = window.location.href.split("?appid=")[0];
this.$http('api/user/userInfo').then(res => {
if (res.is_wx_auth == 0) {
window.location.href =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
this.config_appid +
"&redirect_uri=" +
encodeURIComponent(redirect_uri) +
"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
return;
}
this.$http('api/remittance/remittance', {
account: this.account,
config_id: 1
}).then(res => {
this.btnDisabled = false;
// 公众号环境
wx.config({
debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false,
appId: res.pay.appId, // 必填，公众号的唯一标识
timestamp: res.pay.timeStamp, // 必填，生成签名的时间戳
nonceStr: res.pay.nonceStr, // 必填，生成签名的随机串
signature: res.pay.paySign, // 必填，签名
jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
});
wx.ready(() => {
wx.checkJsApi({
jsApiList: ["chooseWXPay"],
success: function(res) {
console.log("seccess");
},
fail: function(res) {
console.log(res);
}
});
wx.chooseWXPay({
timestamp: res.pay
.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: res.pay.nonceStr, // 支付签名随机串，不长于 32 位
package: res.pay
.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: res.pay
.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: res.pay.paySign, // 支付签名
success: function(res) {
uni.showToast({
title: "充值成功!"
})
},
fail: function(res) {}
});
});
// wx.error(err => {
// alert(err);
// });
// }
})

})
}
//
if (this.payId == 2) {
this.btnDisabled = true;
this.$http('api/remittance/remittance', {
account: this.account,
config_id: 2
}).then(res => {
this.btnDisabled = false;
let data = res.pay.postData;
let url = res.pay.url;
let postForm = document.createElement("form");
postForm.method = "post";
postForm.action = url;
let charInput = document.createElement("input");
charInput.setAttribute("name", "charset");
charInput.setAttribute("value", data.charset);
postForm.appendChild(charInput);
let dataInput = document.createElement("input");
dataInput.setAttribute("name", "data");
dataInput.setAttribute("value", data.data);
postForm.appendChild(dataInput);
let signInput = document.createElement("input");
signInput.setAttribute("name", "sign");
signInput.setAttribute("value", data.sign);
postForm.appendChild(signInput);
let typeInput = document.createElement("input");
typeInput.setAttribute("name", "signType");
typeInput.setAttribute("value", data.signType);
postForm.appendChild(typeInput);
document.body.appendChild(postForm);
postForm.submit();
})
}
if (this.payId == 3) {
this.btnDisabled = true;
this.$http('api/remittance/remittance', {
account: this.account,
config_id: 3
}).then(res => {
this.btnDisabled = false;
let data = res.pay.postData;
let url = res.pay.url;
let postForm = document.createElement("form");
postForm.method = "post";
postForm.action = url;
let charInput = document.createElement("input");
charInput.setAttribute("name", "charset");
charInput.setAttribute("value", data.charset);
postForm.appendChild(charInput);
let dataInput = document.createElement("input");
dataInput.setAttribute("name", "data");
dataInput.setAttribute("value", data.data);
postForm.appendChild(dataInput);
let signInput = document.createElement("input");
signInput.setAttribute("name", "sign");
signInput.setAttribute("value", data.sign);
postForm.appendChild(signInput);
let typeInput = document.createElement("input");
typeInput.setAttribute("name", "signType");
typeInput.setAttribute("value", data.signType);
postForm.appendChild(typeInput);
document.body.appendChild(postForm);
postForm.submit();
})
}
}
}
}
</script>

<style lang="less" scoped>
	.priceItem {
		width: 30%;
		background: #f5f5f5;
		color: #000;
	}

	.activeItem {
		background: #44ACFF;
		color: #fff;
	}

	.payIcon {
		width: 40rpx;
		height: 40rpx;
	}

	.drawBtn {
		position: absolute;
		left: 50%;
		z-index: 10;
		bottom: 120rpx;
		transform: translateX(-50%);
		color: #fff!important;
	}

	.conWrap {
		::v-deep  img {
			width: 100% !important;
			height: auto;
		}
	}

	::v-deep  .u-field {
		// color: #fff;
	}
</style>
